<template>
    <div class="addRole">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加角色</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索 -->
        <el-input placeholder="请输入角色名称" v-model="roleSearch" clearable @clear="clearSearchData" @keyup.enter.native="searchRoleByname()" style="width:40%;margin-top:15px"></el-input>
        <el-button type="primary" @click="searchRoleByname()">查询</el-button>
        <el-button type="success" @click="addRoleDialog">新增角色</el-button>
        <!-- 数据表格 -->
        <el-table
            :data="RoleData"
            stripe
            style="width: 100%;margin-top:10px"
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column
                type="index"
                label="序号"
                width="450%">
            </el-table-column>
            <el-table-column
                prop="roleName"
                label="角色名称"
                width="600%">
            </el-table-column>
            <el-table-column
                label="操作"
                width="630%">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="addRoleDialog">新增</el-button>
                    <el-button size="small" type="primary" @click="updateRoleDialog(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="deleteRole(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>  
        <!-- 添加dialog -->
        <el-dialog
            title="添加人员角色"
            :visible.sync="addRoleDialogVisible"
            width="30%">
            <el-input placeholder="请输入新增角色名称" v-model="roleName"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleAddRole()">取 消</el-button>
                <el-button type="primary" @click="addRole()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改dialog -->
        <el-dialog
            title="修改角色信息"
            :visible.sync="updateRoleDialogVisible"
            width="30%">
            <el-input placeholder="请输入修改角色名称" v-model="roleJson.roleName"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancleUpdateRole()">取 消</el-button>
                <el-button type="primary" @click="updateRole()">确 定</el-button>
            </span>
        </el-dialog>     
    </div>
</template>

<script>
export default {
    data(){
        return{
            // 搜索角色
            roleSearch:"",
            RoleData:[],
            addRoleDialogVisible:false,
            updateRoleDialogVisible:false,
            roleJson:{},
            // 新增角色名称
            roleName:"",
        }
    },
    created(){
        this.getRoleData();
    },
    methods:{
        // 获取数据
        getRoleData(){
            this.$http.get("/getRoleInfo/getAllRoleInfo?roleName="+this.roleSearch).then((res)=>{
                if(res.code === 200){
                    this.RoleData = res.data;
                }else{
                    this.$message.error("获取数据失败");
                }
            }).catch((err)=>{
                this.$message.error("获取数据失败");
            });
        },
        // 搜搜
        searchRoleByname(){
            this.getRoleData();
        },
        // 清空搜索框
        clearSearchData(){
            this.getRoleData();
        },
        // 新增弹窗
        addRoleDialog(){
            this.addRoleDialogVisible = true;
        },
        // 修改弹窗
        updateRoleDialog(row){
            this.roleJson = row;
            this.updateRoleDialogVisible = true;
        },
        // 删除
        deleteRole(row){
            this.$confirm('确定删除<<'+ row.roleName +'>>该角色? 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get(`/getRoleInfo/delRole/${row.roleId}`).then((res)=>{
                    if(res.code === 200 && res.data){
                        this.getRoleData();
                        this.$message.success("删除成功!!!");
                    }else{
                        this.$message.error("删除失败,请联系管理员!!!");
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 取消新增
        cancleAddRole(){
            this.addRoleDialogVisible=false;
            this.roleName = "";
        },
        // 确定新增
        addRole(){
            if(this.roleName == null || this.roleName == ""){
                return this.$message.warning("角色名称不能为空");
            }
            this.$http.post("/getRoleInfo/addRole","roleName="+this.roleName).then((res)=>{
                if(res.code === 200 && res.data){
                    this.$message.success("添加成功");
                    this.addRoleDialogVisible=false;
                    this.getRoleData();
                    this.roleName="";
                }else{
                    this.$message.error("添加失败");
                }
            }).catch((err)=>{
                this.$message.error("添加失败");
            });
        },
        // 取消修改
        cancleUpdateRole(){
            this.updateRoleDialogVisible=false;
            this.roleJson={};
        },
        // 确定修改
        updateRole(){
            this.$http.post("/getRoleInfo/updateRole",this.roleJson).then((res)=>{
                if(this.roleJson.roleName === null || this.roleJson.roleName === ''){
                    return this.$message.warning("角色名称不能为空!!!");
                }
                if(res.code === 200 && res.data){
                    this.updateRoleDialogVisible = false;
                    this.$message.success("修改成功!!!");
                    this.roleJson = {};
                }else{
                    this.$message.error("修改失败,请联系管理员!!!");
                }
            }).catch((res)=>{
                this.$message.error("修改失败,请联系管理员!!!");
            });
        }
    }
}
</script>

<style>

</style>